<template>
    <div class="goods-list">
        <nav-bar title="商品展示" />
        <content-body>
            <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" @top-status-change="handleTopChange" :auto-fill="autoFill" :bottom-all-loaded="isAllLoaded" ref="loadmore">
                <ul>
                    <li v-for="goods in goodsList" :key="goods.id">
                        <router-link :to="{name: 'goods.detail', params: {id: goods.id}}">
                            <img :src="goods.img_url" alt="">
                            <div class="title">{{goods.title | convertStr(21)}}</div>
                            <div class="desc">
                                <div class="sell">
                                    <span>￥{{goods.sell_price}}</span>
                                    <span>￥{{goods.market_price}}</span>
                                </div>
                                <div class="status">
                                    <span class="hot">热卖中</span>
                                    <span class="count">剩余{{goods.stock_quantity}}件</span>
                                </div>
                            </div>
                        </router-link>
                    </li>
                </ul>
                <div slot="top" class="mint-loadmore-top">
                    <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                    <span v-show="topStatus === 'loading'">Loading...</span>
                </div>
            </mt-loadmore>
        </content-body>
    </div>
</template>
<script>
export default {
  data () {
    return {
      goodsList: [],
      page: 1,
      topStatus: '',
      autoFill: false,
      isAllLoaded: false // 数据是否全部加载完毕
    }
  },
  created () {
    this.page = this.$route.query.id || '1'
    this.loadByPage()
  },
  methods: {
    handleTopChange (status) {
      this.topStatus = status
    },
    loadByPage () {
      this.$axios
        .get(`getgoods?pageindex=${this.page}`)
        .then(res => {
          console.log(res)
          this.goodsList = res.data.message
          this.page++
        })
        .catch(err => console.log('获取商品列表失败', err))
    },
    // 列表内容追加
    concatByPage () {
      this.$axios.get(`getgoods?pageindex=${this.page}`).then(res => {
        this.page++
        // 判断是否还有数据
        if (res.data.message.length === 0) {
          this.$toast('没有更多数据了')
          // 若数据已全部获取完毕，通过loadmore属性控制不再加载数据
          this.isAllLoaded = true
        }
        // 内容追加
        this.goodsList = this.goodsList.concat(res.data.message)
        // 通知元素重新定位
        this.$refs.loadmore.onBottomLoaded()
      })
    },
    loadTop () {
      console.log('下拉刷新被触发了')
      this.$refs.loadmore.onTopLoaded()
    },
    loadBottom () {
      this.concatByPage(this.page)
    }
  }
}
</script>
<style lang="less">
.goods-list {
  margin: 0 0 3.4375rem 0;
  ul {
    overflow: hidden;
  }
  li {
    list-style: none;
    width: 48%;
    float: left;
    box-sizing: border-box;
    padding: .2rem;
    margin: .2rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    img {
      width: 100%;
      object-fit: cover;
    }
    .status {
      display: flex;
      justify-content: space-between;
    }
    .sell {
      .status();
    }
  }
}
</style>
